<template>
  <div class="RecipeDetail">
    <div class="loading1" v-if="isloading">
      <van-loading size="30px" color="#fbb705">加载中...</van-loading>
    </div>
    <div
      class="top"
      :style="{ backgroundColor: topStyle == true ? '#fbb705' : '' }"
      v-if="!isloading"
    >
      <div class="arrow-left">
        <van-icon
          name="arrow-left"
          :color="topStyle == true ? '#000000' : '#ffffff'"
          size="30"
          @click="onBack"
        />
        <div class="top-userInfo" v-if="topStyle1">
          <img :src="recipe.user.user_photo" alt="" @click="toUserDetails(recipe.user.user_id)" />
          <div class="nickname">{{ recipe.user.nickname }}</div>
          <div class="lvl" :style="topStyle == true ? 'color: red':'#fbb705'">
            <i>LV.{{ recipe.user.lvl }}</i>
          </div>
        </div>
      </div>
      <div class="share">
        <div class="focusButton" v-if="topStyle1" :style="isFocus ? 'background: #ccc':'background: #fff'" @click="onFocus(recipe.user.user_id)">{{isFocus ? '已关注' : '关注'}}</div>
        <van-icon
          name="share-o"
          :color="topStyle == true ? '#000000' : '#ffffff'"
          size="30"
          @click="onShare"
        />
      </div>
    </div>
    <div class="content" v-if="!isloading" ref="content" @scroll="onScroll">
      <div class="img" v-if="!recipe.vfurl" ref="i">
        <img :src="recipe.photo_path" alt="" />
      </div>
      <div class="video" v-if="recipe.vfurl" ref="i">
        <video :src="recipe.vfurl" controls autoplay></video>
      </div>
      <div class="title">{{ recipe.title }}</div>
      <div class="bc">
        <span class="browse">浏览{{ recipe.views_count_text }}</span
        >·<span class="collection">收藏{{ recipe.favo_counts }}</span>
      </div>
      <div class="user" ref="user">
        <div class="userInfo">
          <div class="user_photo" @click="toUserDetails(recipe.user.user_id)">
            <img :src="recipe.user.user_photo" alt="" />
          </div>
          <div class="nickname">{{ recipe.user.nickname }}</div>
          <div class="lvl">
            <i>LV.{{ recipe.user.lvl }}</i>
          </div>
        </div>
        <div class="focusButton" :style="isFocus ? 'background: #eee':'background: #fbb705'" @click="onFocus(recipe.user.user_id)">{{isFocus ? '已关注' : '关注'}}</div>
      </div>
      <div class="cookstory">
        {{ recipe.cookstory }}
      </div>
      <div class="td" v-if="recipe.cook_time != ''&& recipe.cook_difficulty != ''">
        <div class="cook_time">
          <img :src="recipe.cook_time_image" alt="" />{{ recipe.cook_time }}
        </div>
        <div class="cook_difficulty">
          <img :src="recipe.cook_difficulty_image" alt="" />{{
            recipe.cook_difficulty
          }}
        </div>
      </div>
      <div class="ingredients">
        <div class="i-title">食材清单</div>
        <div class="i-item" v-for="(item, index) in recipe.major" :key="index">
          <div class="i-item-name">{{ item.title }}</div>
          <div class="note">{{ item.note }}</div>
        </div>
      </div>
      <div class="step">
        <div class="step-title">烹饪步骤</div>
        <div
          class="step-item"
          v-for="(item1, index1) in recipe.cookstep"
          :key="index1"
        >
          <div class="position">
            <span>步骤</span>{{ item1.position }}/{{ recipe.cookstep.length }}
          </div>
          <img :src="item1.image" alt="" />
          <div class="step-content">{{ item1.content }}</div>
        </div>
      </div>
      <div class="release_time">{{ recipe.release_time }}</div>
      <div class="relevant" v-if="!isloading1&&Relatedinfo.comments.length != 0">
        <div class="HotComment">
          <div class="hc-title">
            热门评论<span
              >{{Relatedinfo.first_level_comment_count}}条评论</span
            >
          </div>
          <div
            class="hc-item"
            v-for="(item2, index2) in Relatedinfo.comments"
            :key="index2"
          >
            <div class="hc-item-userInfo">
              <div class="user-p">
                <img :src="item2.u.p" alt="" />
              </div>
              <div class="userInfo-right">
                <div class="user-n">
                  {{ item2.u.n
                  }}<span class="lvl"
                    ><i>LV.{{ item2.u.lvl }}</i></span
                  >
                </div>
                <div class="city">{{ item2.city }}</div>
              </div>
            </div>
            <div class="hc-content">{{ item2.content[0].c }}</div>
            <div class="child_comments_box" v-if="item2.child_comments.length > 0">
              <div
                class="child_comments"
                v-for="(item3, index3) in item2.child_comments"
                :key="index3"
              >
                <span class="un">{{ item3.u.n }}：</span>回复　<span
                  class="reply_user-n"
                  >{{ item3.reply_user.n }}：</span
                >{{ item3.content[0].c }}
              </div>
            </div>
          </div>
        </div>
        <div class="seeAll" @click="onSeeAll">查看全部评论</div>
      </div>
    </div>
    <div class="bottom" v-if="!isloading">
      <input type="text" placeholder="说点什么" />
      <div class="icon" @click="onSeeAll">
        <van-icon name="chat-o" size="25" /><span>{{
          Relatedinfo.first_level_comment_count == 0
            ? "评论"
            : Relatedinfo.first_level_comment_count
        }}</span>
      </div>
      <div class="icon">
        <van-icon
          :name="isstar ? 'star' : 'star-o'"
          :color="isstar ? '#fbb705' : ''"
          size="25"
          @click="onstar"
        /><span>{{ isstar ? "已收藏" : "收藏" }}</span>
      </div>
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      @select="onselect"
      @cancel="oncancel"
      @click-overlay="onClickOverlay"
    />
    <van-popup
      class="van-popup"
      v-model="show"
      round
      closeable
      position="bottom"
      :style="{ height: '70%' }"
    >
      <div class="van-popup-top">
        全部评论（{{Relatedinfo.first_level_comment_count}}）
      </div>
      <div class="van-popup-center" ref="popupCenter" @scroll="onSceoll1">
        <div class="comments" ref="comments">
          <div
            class="hc-item"
            v-for="(item2, index2) in comments"
            :key="index2"
          >
            <div class="hc-item-userInfo">
              <div class="user-p">
                <img :src="item2.u.p" alt="" />
              </div>
              <div class="userInfo-right">
                <div class="user-n">
                  {{ item2.u.n
                  }}<span class="lvl"
                    ><i>LV.{{ item2.u.lvl }}</i></span
                  >
                </div>
                <div class="city">{{ item2.city }}</div>
              </div>
            </div>
            <div class="hc-content">{{ item2.content[0].c }}</div>
            <div class="child_comments_box" v-if="item2.child_comments.length > 0">
              <div
                class="child_comments"
                v-for="(item3, index3) in item2.child_comments"
                :key="index3"
              >
                <span class="un">{{ item3.u.n }}：</span>回复　<span
                  class="reply_user-n"
                  >{{ item3.reply_user.n }}：</span
                >{{ item3.content[0].c }}
              </div>
            </div>
          </div>
          <div class="loading" v-if="isloading2">
        <van-loading size="24px" color="#fbb705">加载中...</van-loading>
      </div>
      <div class="noMore" v-if="comments.length == Relatedinfo.first_level_comment_count">没有更多评论了</div>
        </div>
      </div>
      <div class="van-popup-bottom">
        <input type="text" placeholder="说点什么" />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "RecipeDetail",
  data() {
    return {
      recipeid: "",
      isloading: false,
      isloading1:false,
      isloading2:false,
      topStyle: false,
      topStyle1: false,
      show: false,
      showShare: false,
      isFocus:false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
        ],
      ],
      recipe: {},
      Relatedinfo: {},
      comments:[],
      isstar: false,
      offset:0,
      MyFocus:[],
      users:[],
      isLogin:false
    };
  },
  created() {
    this.recipeid = this.$route.query.id;
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
      this.users.forEach((ele) => {
        this.MyFocus = ele.Focus
        if(ele.isLogin){
          this.isLogin = true
        }
      });
    }
    this.getRecipeDetail();
    this.getRelatedinfo()
    this.getFlatcomments()
  },
  methods: {
    getRecipeDetail() {
      this.isloading = true;
      this.axios({
        method: "get",
        url: "recipe/detail",
        params: {
          recipeid: this.recipeid,
        },
      }).then((result) => {
        if (result.data.state == "success") {
          this.recipe = result.data.result.recipe;
          this.MyFocus.forEach(ele=>{
            if(this.recipe.user.user_id == ele){
              this.isFocus = true
            }
          })
          this.isloading = false;
        }
      });
    },
    getRelatedinfo() {
        this.isloading1 = true
      this.axios({
        method: "get",
        url: "recipe/relatedinfo",
        params: {
          recipeid: this.recipeid,
        },
      }).then((result) => {
        
        if (result.data.state == "success") {
          this.Relatedinfo = result.data.result;
          this.isloading1 = false
        }
      });
    },
    getFlatcomments() {
        this.isloading2 = true
        this.axios({
            method:'get',
            url:'recipe/flatcomments',
            params:{
                recipeid:this.recipeid,
                offset:this.offset,
                limit:20
            }
        }).then(result=>{
            
            if(result.data.state == "success"){
                result.data.result.comments.forEach(ele=>{
                    this.comments.push(ele)
                })
                
                this.offset += 20
                this.isloading2 = false
            }
        })
    },
    onScroll() {
      const scrollTop = this.$refs.content.scrollTop;
      const iHeight = this.$refs.i.offsetHeight;
      const userTop = this.$refs.user.offsetTop;
      if (iHeight - scrollTop <= iHeight * 0.4) {
        this.topStyle = true;
      } else {
        this.topStyle = false;
      }
      if (userTop - 18 <= scrollTop) {
        this.topStyle1 = true;
      } else {
        this.topStyle1 = false;
      }
    },
    onSceoll1(e){
        const popupCenter = this.$refs.popupCenter.offsetHeight
        const comments = this.$refs.comments.offsetHeight
        if(comments - (e.target.scrollTop + popupCenter) <50 && !this.isloading2 && this.comments.length != this.Relatedinfo.first_level_comment_count){
            this.getFlatcomments()
        }
    },
    toUserDetails(id){
      this.$router.push({name:'UserDetails',query:{id}})
    },
    onFocus(id){
      console.log(id);
        if(this.isLogin){
        this.users.forEach((ele) => {
        if (ele.isLogin) {
            if (!this.isFocus) {
              this.isFocus = true;
              ele.Focus.push(id)
            } else {
              this.isFocus = false;
              ele.Focus.forEach((item,index)=>{
                if(id == item){
                  ele.Focus.splice(index,1)
                }
              })
            }
        }
      });
      localStorage.setItem('users',JSON.stringify(this.users))
      }else{
        this.$dialog
        .confirm({
          title: "您尚未登录",
          message: "请登录后再试",
        })
        .then(() => {
          this.$router.push({name:'Login'})
        })
        .catch(() => {});
      }
    },
    onstar() {
      if (!this.isstar) {
        this.isstar = true;
      } else {
        this.isstar = false;
      }
    },
    onSeeAll() {
      this.show = true;
    },
    onBack() {
      this.$router.go(-1);
    },
    onShare() {
      this.showShare = true;
    },
    onselect() {
      this.$toast.success("分享成功");
      this.showShare = false;
    },
    oncancel() {
      this.showShare = false;
    },
    onClickOverlay() {
      this.oncancel();
    },
  },
};
</script>

<style lang="scss" scoped>
.RecipeDetail {
  .loading1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top {
    width: calc(100% - 30px);
    padding: 45px 15px 15px;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    .arrow-left {
      display: flex;
      align-items: center;
      .top-userInfo {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin: 0 10px;
        }
        .lvl {
          font-weight: 600;
          color: #fbb705;
          margin-left: 3px;
        }
      }
    }
    .share {
      display: flex;
      align-items: center;
      .focusButton {
        font-size: 10px;
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        background-color: #fbb705;
        margin-right: 10px;
      }
    }
  }
  .content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #fff;
    padding-bottom: 70px;
    .img {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .video {
      width: 100%;
      video {
        width: 100%;
      }
    }
    .title {
      font-size: 22px;
      font-weight: 600;
      padding: 0 15px;
      margin-top: 10px;
    }
    .bc {
      padding: 0 15px;
      color: #666;
      font-size: 30px;
      display: flex;
      align-items: center;
      span {
        font-size: 10px;
        margin: 5px;
      }
    }
    .user {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      margin-bottom: 15px;
      .userInfo {
        display: flex;
        align-items: center;
        .user_photo {
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        .lvl {
          font-weight: 600;
          color: #fbb705;
          margin-left: 3px;
        }
      }
      .focusButton {
        font-size: 10px;
        width: 70px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
        background-color: #fbb705;
      }
    }
    .cookstory {
      padding: 0 15px;
      font-size: 18px;
      line-height: 35px;
      margin-bottom: 20px;
    }
    .td {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-top: 20px;
      margin-bottom: 40px;
      div {
        display: flex;
        align-items: center;
        font-size: 18px;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
        }
      }
    }
    .ingredients {
      padding: 0 15px;
      .i-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
      }
      .i-item {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        font-size: 18px;
      }
    }
    .step {
      padding: 0 15px;
      margin-top: 30px;
      .step-title {
        font-size: 20px;
        font-weight: 600;
      }
      .step-item {
        width: 100%;
        margin: 20px 0;
        .position {
          font-size: 13px;
          span {
            font-size: 15px;
          }
        }
        img {
          width: 100%;
          margin: 5px 0;
          border-radius: 10px;
        }
        .step-content {
          font-size: 18px;
        }
      }
    }
    .release_time {
      padding: 0 15px;
      color: #666;
    }
    .relevant {
      padding: 0 15px;
      margin-top: 20px;
      .HotComment {
        .hc-title {
          font-size: 18px;
          font-weight: 600;
          span {
            color: #088a85;
            font-size: 15px;
            font-weight: 100;
            margin-left: 10px;
          }
        }
        .hc-item {
          margin: 10px 0;
          .hc-item-userInfo {
            display: flex;
            align-items: center;
            .user-p {
              margin-right: 10px;
              img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
            }
            .userInfo-right {
              .user-n {
                margin-bottom: 5px;
                span {
                  color: #fbb705;
                  font-weight: 600;
                  margin-left: 5px;
                }
              }
              .city {
                color: #999;
              }
            }
          }
          .hc-content {
            margin: 5px 0 5px 40px;
          }
          .child_comments_box {
            margin: 5px 0 5px 40px;
            padding: 10px;
            border-radius: 5px;
            background-color: #eee;
            .child_comments {
              margin-bottom: 3px;
              span {
                font-size: 13px;
                font-weight: 600;
              }
            }
          }
        }
      }
      .seeAll {
        width: 100%;
        text-align: center;
        color: #088a85;
      }
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    input {
      width: 45%;
      border-style: none;
      background-color: #eee;
      padding: 10px 15px;
      border-radius: 20px;
      margin-right: 10px;
    }
    .icon {
      font-size: 15px;
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }
  .van-popup {
    .van-popup-top {
      font-size: 18px;
      padding: 15px;
      border-bottom: 1px solid #ddd;
    }
    .van-popup-center {
      width: calc(100% - 30px);
      height: calc(100% - 55px - 57px);
      overflow-y: auto;
      padding: 0 15px;
      .comments {
        .hc-item {
          margin: 15px 0;
          .hc-item-userInfo {
            display: flex;
            align-items: center;
            .user-p {
              margin-right: 10px;
              img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
            }
            .userInfo-right {
              .user-n {
                margin-bottom: 5px;
                span {
                  color: #fbb705;
                  font-weight: 600;
                  margin-left: 5px;
                }
              }
              .city {
                color: #999;
              }
            }
          }
          .hc-content {
            margin: 5px 0 5px 40px;
          }
          .child_comments_box {
            margin: 5px 0 5px 40px;
            padding: 10px;
            border-radius: 5px;
            background-color: #eee;
            .child_comments {
              margin-bottom: 3px;
              span {
                font-size: 13px;
                font-weight: 600;
              }
            }
          }
        }
        .loading {
      width: 100%;
      margin: 10px 0;
      text-align: center;
    }
    .noMore{
        width: 100%;
        text-align: center;
        margin: 10px 0;
        color: #666;
    }
    }
    }
    .van-popup-bottom {
      width: 100%;
      position: fixed;
      bottom: 0;
      box-shadow: 5px 0 10px 5px #eee;
      padding: 10px 15px;
      input {
        width: calc(100% - 30px - 30px);
        border-style: none;
        background-color: #eee;
        padding: 10px 15px;
        font-size: 15px;
        border-radius: 20px;
      }
    }
  }
}
</style>